<template>
	<view class="filter-bar-wrap">
		<!-- 横向滚动区域 -->
		<scroll-view class="filter-scroll" scroll-x :show-scrollbar="false" :scroll-left="scrollLeft" scroll-with-animation>
			<view class="filter-content">
				<view class="filter-item" :class="{ active: selectedItem.name === item.name }" @click="selectFilter(index, item)" v-for="(item, index) in filterList" :key="index">
					<text>{{ item.name }}</text>
				</view>
			</view>
		</scroll-view>

		<!-- 展开/收起按钮 -->
		<view class="expand-btn" @click="toggleExpand" v-if="filterList.length > maxVisibleItems">
			<text class="expand-text">{{ isExpanded ? '收起' : '展开' }}</text>
			<text class="expand-icon" :class="{ expanded: isExpanded }">▼</text>
		</view>

		<!-- 展开后的完整列表 -->
		<view class="expanded-list" v-if="isExpanded && filterList.length > maxVisibleItems">
			<view class="expanded-content">
				<view
					class="filter-item expanded-item"
					:class="{ active: selectedItem.name === item.name }"
					@click="selectFilter(index, item)"
					v-for="(item, index) in filterList"
					:key="index"
				>
					<text>{{ item.name }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'JCategoryFilter',
	props: {
		// 筛选列表数据
		filterList: {
			type: Array,
			default: () => []
		},
		// 当前选中的分类项
		selectedItem: {
			type: Object,
			default: () => ({})
		},
		// 最大可见项目数（超过此数量显示展开按钮）
		maxVisibleItems: {
			type: Number,
			default: 5
		}
	},
	data() {
		return {
			isExpanded: false,
			scrollLeft: 0
		};
	},
	methods: {
		// 选择筛选条件
		selectFilter(index, item) {
			console.log('选择筛选条件:', item, '索引:', index);

			// 向父组件发送事件
			this.$emit('filter-change', item, index);

			// 如果选中项不在可见范围内，自动滚动到该位置
			this.scrollToSelectedItem(index);
		},

		// 切换展开/收起状态
		toggleExpand() {
			this.isExpanded = !this.isExpanded;
			console.log('展开状态:', this.isExpanded);
		},

		// 滚动到选中项
		scrollToSelectedItem(selectedIndex) {
			if (this.isExpanded) return; // 展开状态下不需要滚动

			this.$nextTick(() => {
				const query = uni.createSelectorQuery().in(this);
				query.selectAll('.filter-item').boundingClientRect();
				query.select('.filter-scroll').boundingClientRect();
				query.exec((res) => {
					const items = res[0];
					const scrollView = res[1];

					if (!items || !scrollView || items.length === 0) return;

					// 计算选中项的位置
					let scrollLeft = 0;
					for (let i = 0; i < selectedIndex; i++) {
						scrollLeft += items[i].width;
					}

					// 计算滚动位置，使选中项居中
					const selectedItemWidth = items[selectedIndex].width;
					const centerScrollLeft = scrollLeft - (scrollView.width - selectedItemWidth) / 2;

					// 确保滚动位置不为负数
					this.scrollLeft = Math.max(0, centerScrollLeft);
				});
			});
		}
	}
};
</script>

<style lang="less" scoped>
.filter-bar-wrap {
	padding: 20rpx;
	padding-bottom: 0;
	background: #fff;

	.filter-scroll {
		width: 100%;
		white-space: nowrap;

		.filter-content {
			display: inline-flex;
			gap: 10rpx;
			align-items: center;
		}

		.filter-item {
			flex-shrink: 0;
			height: 40rpx;
			padding: 0 14rpx;
			background: #f5f5f5;
			border-radius: 10rpx;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			white-space: nowrap;

			text {
				font-size: 24rpx;
				color: #333;
			}

			&.active {
				background: #246ef9;

				text {
					color: #fff;
					font-weight: 600;
				}
			}
		}
	}

	// 展开/收起按钮
	.expand-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 40rpx;
		margin-top: 10rpx;
		padding: 0 20rpx;
		background: #f8f9fa;
		border-radius: 10rpx;
		border: 1rpx solid #e9ecef;

		.expand-text {
			font-size: 24rpx;
			color: #666;
			margin-right: 8rpx;
		}

		.expand-icon {
			font-size: 20rpx;
			color: #999;
			transition: transform 0.3s ease;

			&.expanded {
				transform: rotate(180deg);
			}
		}
	}

	// 展开后的完整列表
	.expanded-list {
		margin-top: 10rpx;
		background: #f8f9fa;
		border-radius: 10rpx;
		padding: 10rpx;

		.expanded-content {
			display: flex;
			flex-wrap: wrap;
			gap: 10rpx;
		}

		.expanded-item {
			height: 40rpx;
			padding: 0 14rpx;
			background: #fff;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border: 1rpx solid #e9ecef;

			text {
				font-size: 24rpx;
				color: #666;
			}

			&.active {
				background: #246ef9;
				border-color: #246ef9;

				text {
					color: #fff;
					font-weight: 600;
				}
			}
		}
	}
}
</style>
